import React, { Component } from "react"
import { Input } from 'antd';
import TheButton from '@/components/TheButton';
import '../style/style.scss';

const { TextArea } = Input;

export default class EditInput extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: props.editData ?? {},
      index: props.editIdex ?? 0,
      warning: false,
      editType: props.editType
    }
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.editData.status != prevState.data.status) {
      this.setState({
        data: prevProps.editData
      })
    }

  }
  onEdit = (data, index, warning) => {
    this.setState({
      warning: false
    })
    this.props.onEdit({ data, index, warning })
  }
  regInput(value) {
    value = value.replace(/[^\d.]/g, '')// 只能是数字和小数点，不能是其他输入
    value = value.replace(/^\./g, "");// 保证第一位只能是数字，不能是点
    value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");  // 小数只能出现1位
    value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 小数点后面保留2位
    return value
  }
  onInput = (e) => {

    let value = e.target.value
    let { data } = this.state
    if (value !== '') {
      this.setState({
        warning: false
      })
    }
    if (data.key == 'minimumAmount' || data.key == 'maximumAmount' || data.key == 'dayAmount' || data.key == 'manualAuditThreshold' || data.key == 'moneyLimit') {
      value = this.regInput(value)
    } else {
      value = value.replace(/[^\d]/g, '')// 只能是数字
    }
    this.setState({
      data: {
        ...this.state.data,
        value: value
      }
    })
  }
  onSave = () => {
    let { data, editType } = this.state

    if (data.value === '') {
      this.setState({ warning: true })
      return false
    }
    let regex = /^(?!.*(?<![\d.])0\d).*(?<![.])$/ //不能以.结尾 并且除小数点外不能连续输入0
    if (data.key !== 'text' && !regex.test(data.value)) {
      React.$message({ type: 'error', content: '输入格式不正确!' })
      return false
    }
    // 单日最大次数
    if (data.key === 'dayNumber' && (data.value > 10000 || data.value < 1)) {
      React.$message({ type: 'error', content: '只能输入1-10000的数字' })
      return false
    }
    // 超时未支付时间
    if (data.key === 'timeout' && (data.value > 600 || data.value < 1)) {
      React.$message({ type: 'error', content: '只能输入1-600的数字' })
      return false
    }
    // 小时 分钟 充值最大次数
    if ((data.key === 'minutesNumber' || data.key === 'hourNumber') && (data.value > 999 || data.value < 1)) {
      React.$message({ type: 'error', content: '只能输入1-999的数字' })
      return false
    }
    if (editType === 0) {
      if ((data.key == 'minimumAmount' || data.key == 'maximumAmount' || data.key == 'dayAmount' || data.key == 'manualAuditThreshold' || data.key == 'moneyLimit') && (data.value > 999999.99 || data.value < 0.1)) {
        React.$message({ type: 'error', content: '只能输入0.1-999999.99的数字' })
        return false
      }
    }
    if (editType === 1) {
      if ((data.key == 'minimumAmount' || data.key == 'maximumAmount' || data.key == 'dayAmount' || data.key == 'manualAuditThreshold' || data.key == 'moneyLimit') && (data.value > 999999.99 || data.value < 0.01)) {
        React.$message({ type: 'error', content: '只能输入0.01-999999.99的数字' })
        return false
      }
    }
    // 金额相关最大值最小值校验

    if (data.key == 'text' && data.value.length < 2) {
      React.$message({ type: 'error', content: '只能输入2-30个字' })
      return false
    }
    // 提现服务费
    if (data.key === 'withdrawalServiceFee' && (data.value > 100 || data.value < 0)) {
      React.$message({ type: 'error', content: '只能输入0-100的数字' })
      return false
    }
    this.props.onSave({ data, index: this.state.index })
  }
  onCancel = () => {
    this.setState({
      warning: false
    })
    this.props.onCancel({ data: this.state.data, index: this.state.index })
  }
  onBlur = (e) => {
    let { data } = this.state
    let regex = /^(?!.*(?<![\d.])0\d).*(?<![.])$/ //不能以.结尾 并且除小数点外不能连续输入0
    if (data.key !== 'text' && !regex.test(data.value)) return false
    if ((data.key == 'minimumAmount' || data.key == 'maximumAmount' || data.key == 'dayAmount' || data.key == 'manualAuditThreshold' || data.key == 'moneyLimit') && e.target.value != '') {
      this.setState({
        data: { ...data, value: Number(data.value).toFixed(2) }
      })
    }
  }
  // TextArea文本框修改值
  valueInput = (e) => {
    let value = e.target.value.replace(/\s+/g, '')
    this.setState({
      data: {
        ...this.state.data,
        value: value,
      }
    })
  }
  render() {
    let { data, index, warning } = this.state
    if (warning && data.status === 0) {
      warning = false
    }
    return (
      <div>
        {data.status === 0 ? <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}> <div style={{ textAlign: 'center' }}>{data.value}{data.key === 'withdrawalServiceFee' && '%'}</div>
          <TheButton haspermi={["wallet:rechargeWithdraw:edit"]} onClick={() => this.onEdit(data, index, warning)}>修改</TheButton></div>
          :
          <div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              {
                data.key === 'text' ?
                  <TextArea showCount style={{ border: warning ? '1px solid red' : '1px solid #ccc', height: 80 }} maxLength={30} value={data.value} onChange={this.valueInput} onInput={this.valueInput} /> :
                  <input style={{ border: warning ? '1px solid red' : '1px solid #ccc', width: 80, paddingLeft: 5 }} onInput={this.onInput} value={data.value} onBlur={this.onBlur} maxLength={9} />
              }
              <TheButton haspermi={["wallet:rechargeWithdraw:cancel"]} onClick={this.onCancel}>取消</TheButton>
              <TheButton haspermi={["wallet:rechargeWithdraw:save"]} onClick={this.onSave}> 保存</TheButton>
            </div>
            {warning && <div style={{ color: 'red', fontSize: 12 }}>此项为必填项</div>}
          </div>
        }
      </div>
    );
  }
}